<template>
  <div class="HomeViews">
    <h1>首页</h1>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple orange" @click="gotoUser">
          <p>883</p>
          <p>
            <i class="el-icon-user"></i>
            <span>用户总数</span>
          </p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple green">
          <p>1255</p>
          <p>
            <i class="el-icon-shopping-cart-full"></i>
            <span>商品总数</span>
          </p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple blue">
          <p>824</p>
          <p>
            <i class="el-icon-news"></i>
            <span>订单总数</span>
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  methods:{
    gotoUser(){
      this.$router.push("/Userback")
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
.HomeViews {
  padding: 20px 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  background: lightgreen;
  cursor: pointer;
  transition: box-shadow 0.5s;
  -webkit-transition: box-shadow 0.5s;
}
.grid-content {
  border-radius: 4px;
  min-height: 100px;
  padding: 25px;
  color: white;
}
.bg-purple > p {
  text-align: center;
  line-height: 50px;
}
.bg-purple:hover {
  transition: all 1s;
  color: black;
  box-shadow:0px 0px 20px hotpink;
}

h1 {
  line-height: 100px;
  font-size: 35px;
  font-weight: 500;
}
.bg-purple > p:nth-child(1) {
  font-size: 40px;
}
.orange {
  @include bgColor(#f0ad4e);
}
.green {
  // #f0ad4e
  @include bgColor(#5cb85c);
}
.blue {
  @include bgColor(#4cb1cf);
}
</style>